<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .app , #wrap{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: rgb(240, 149, 13);
        }

    </style>
</head>
<body>
    <div class="app">
        <input type="text" placeholder="手机号">
    </div>
   
    <script>
        var input=document.querySelector("input");
        input.addEventListener("textInput",function(e){
            console.log(e.data);
        })
        /*
        “DOM3 级事件”规范中引入了一个新事件，名叫textInput。

        根据规范，当用户在可编辑区域(任意可输入区域)中输入字符时，就会触发这个事件。这个事件与keypress事件有所不同

        区别之一就是任何可以获得焦点的元素都可以触发keypress 事件，但只有可编辑区域才能触发textInput事件。
        区别之二是textInput 事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress
        事件则在按下那些能够影响文本显示的键时也会触发（例如退格键）。

        
        
        
        */
    </script>


    


</body>
</html>